<template>
	<view class="content mainpadding" v-if="pageShow">
		<view class="mainpadding ffffff">
			<view class="flexleft" @click="jumpdetail('/pages_index/shopInfo?id=',orderInfo.shop_id)">
				<image class="shopImg margin_right1" src="/static/images/order/shop.png" mode=""></image>
				<view class="text_x color_ling margin_right1">{{orderInfo.shop.name}}</view>
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>

			<view class="flexbetween margin_top">
				<view class="flex">
					<image class="shopInfoImg" src="/static/images/index/phone.png" mode=""></image>
					<view class="color_san text_five">{{orderInfo.shop.shopmbl}}</view>
				</view>
				<view class="flexleft">
					<view class="margin_right4 text" @click.stop="daohang(orderInfo.shop.address)">
						<image class="shopPhone" src="/static/images/index/navigation.png" mode=""></image>
						<view class="text_pee color_san">導航</view>
					</view>
					<view class="text" @click.stop="phone(orderInfo.shop.shopmbl)">
						<image class="shopPhone" src="/static/images/index/phoneShop.png" mode=""></image>
						<view class="text_pee color_san">電話</view>
					</view>
				</view>
			</view>
			<view class="flexleft margin_top">
				<image class="shopInfoImg" src="/static/images/index/address.png" mode=""></image>
				<view class="color_san text_five">{{orderInfo.shop.address}}</view>
			</view>
		</view>
		<view class="flexbetween margin_top paddinglr15">
			<view class="flexleft ">
				<view class="margin_right2 flexleft" v-if="orderInfo.order_status==10">
					<view class="text_j color_san margin_right1">待支付</view>
					<view class="">
						<u-count-down :time="Number(orderInfo.cancel_time)*1000-Number(new Date())"
							format="HH:mm:ss"></u-count-down>
					</view>后自動取消
				</view>
				<view class="text_j color_san margin_right2" v-if="orderInfo.order_status==20">待入住</view>
				<view class="text_j color_san margin_right2" v-if="orderInfo.order_status==30">已入住</view>
				<view class="text_j color_san margin_right2" v-if="orderInfo.order_status==40">已完成</view>
				<view class="text_j color_san margin_right2" v-if="orderInfo.order_status==50">取消審核中</view>
				<view class="text_j color_san margin_right2" v-if="orderInfo.order_status==60">已取消</view>
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
			<view class="flexright">
				<view class="listbtnhuang margin_left2" @click="connection">聊聊</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="margin_top border2 ffffff mainpadding">
			<view class="flexleft">
				<image :src="orderInfo.shoptable.image_text" class="goodsImg margin_right3" mode=""></image>
				<view class="flexcolumnbet" style="width: 100%;height: 157rpx;">
					<view class="xiaohei titletext">{{orderInfo.shoptable.num}} <text style="font-size: 26rpx;"
							class="xiaolan margin_left2">{{(orderInfo.house_name && orderInfo.shoptable.num!=orderInfo.house_name)?orderInfo.house_name:""}}</text>
					</view>
					<view class="eshiliu bold" v-show="orderInfo.shoptable.des" style="color: #333;">{{orderInfo.shoptable.des}}</view>
					<view class="xiaohei main_size flexleft flex_wrap">
						<view class="margin_right1 guigek"  v-for="(it,ind) in orderInfo.shoptable.fwss_text" :key="it">{{it}}</view>
					</view>
					<view class="flexleft">
						<view class="" v-for="(ite,itedex) in orderInfo.gg_content_text" :key="itedex">
							<text class="xiaohui" style="color: #00a0e9;" v-for="(it,itdex) in ite.content"
								:key="itdex">
								<text class="margin_right1" v-show="it.num!=0">{{it.name}}*{{it.num}}</text>
							</text>
						</view>
					</view>
					<view class="flexbetween" style="width: 100%;">
						<view class="xiaohong main_size">${{orderInfo.pay_price}}</view>
						<view class="xiaohui main_size">{{orderInfo.days}}晚 *{{orderInfo.house_num}}閒</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius" v-if="orderInfo.choose_house.length">
			<view class="text_a color_ling ">房間信息</view>
			<view class="flexleft">
				<text style="font-size: 26rpx;" class="xiaolan margin_right margin_top"
					v-for="item in orderInfo.choose_house" :key="item.id">{{item.name}}</text>
			</view>
		</view>
		<view class="margin_top">
			<view class="flexbetween">
				<view class="" style="width: 20%;">
					入住信息
				</view>
				<view style="display:flex;justify-content: flex-end;width: 80%;align-items: center;" @click="sharemsg" v-if="Number(orderInfo.house_num)!=orderInfo.ordergoods.length">
					<view class="color_red" style="margin-right: 10rpx;">
						※請分享　協助填寫入住訊息
					</view>
					<view class="shareBtn">
						<u-icon name="share" color="#ffffff" size="24"></u-icon>
					</view>
				</view>
			</view>
			<view class="flexleft xiaohong margin_top1"  v-if="Number(orderInfo.house_num)!=orderInfo.ordergoods.length">
				尚未登入入住訊息{{Number(orderInfo.house_num)-orderInfo.ordergoods.length}}筆
			</view>
		</view>
		<view class="mainpadding_top ffffff radius">
			<view class="joininfoitem" v-for="(item,index) in orderInfo.ordergoods" :key="index">
				<view class="" style="display: flex;justify-content: flex-end;" @click="delJoinInfo(item.id)">
					<u-icon name="trash" color="red" size="20"></u-icon>
				</view>
				<view class="flexbetween margin_top2">
					<view class="text_a color_ling">姓名</view>
					<view class="text_x color_ling">{{item.join_username}}</view>
				</view>

				<view class="flexbetween margin_top">
					<view class="text_a color_ling">行動電話</view>
					<view class="text_x color_ling">{{item.join_mobile}}</view>
				</view>
			</view>
		</view>

		<!-- 訂單規格 -->
		<view class="margin_top border2 ffffff mainpadding">
			<view class="flexbetween">
				<view class="text_a color_ling">總金額</view>
				<view class="text_x color_orange">${{orderInfo.pay_price}}</view>
			</view>
			<view class="flexbetween margin_top" v-if="orderInfo.order_status!=10 && orderInfo.order_status!=60">
				<view class="text_a color_ling">已付</view>
				<view class="text_x color_orange">${{orderInfo.pay_price}}</view>
			</view>
			<view class="flexbetween margin_top" v-if="orderInfo.order_status==60">
				<view class="text_a color_ling">退款</view>
				<view class="text_x color_orange">${{orderInfo.return_price}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">訂單編號</view>
				<view class="text_a color_six">{{orderInfo.order_no}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">入住時間</view>
				<view class="text_a color_six">{{orderInfo.start_date_text}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">結束時間</view>
				<view class="huang_text text_a">{{orderInfo.start_date_text}}</view>
			</view>
			<view class="flexbetween margin_top" v-if="orderInfo.order_status!=10 && orderInfo.order_status!=60">
				<view class="text_a color_ling">支付方式</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==0">待支付</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==1">點數支付</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==2">多元支付</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==3">現金支付</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==4">信用卡</view>
			</view>
			<view class="flexbetween margin_top" v-if="orderInfo.paypz_image_text">
				<view class="xiaohei main_size">支付憑證</view>
				<image class="listleftimg1 radius" :src="orderInfo.paypz_image_text" mode=""
					@click.stop="lbtpriview(0,[orderInfo.paypz_image_text])"></image>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="footer flex-wrap flexright">
			<view class="greyBtn margin_top margin_left3" @clic.stopk="cancelzsOrder(id)"
				v-show="orderInfo.order_status==10 || orderInfo.order_status==20">取消訂單</view>
			<view class="orangeBtn margin_top margin_left3" v-show="orderInfo.order_status==10"
				@click.stop="zsjiezhang(orderInfo)">結帳</view>
			<view class="orangeBtn margin_top margin_left3" v-show="orderInfo.order_status==10"
				@click.stop="pzshow=true;">上傳憑證</view>
			<!-- <view class="greyBtn margin_top margin_left3" @click="removezsOrder(id)" v-show="orderInfo.order_status==40 || orderInfo.order_status==60">刪除記錄</view> -->
		</view>
		<!-- 上傳支付憑證 -->
		<u-modal :show="pzshow" title="上傳憑證" confirmColor="#ffb800" confirmText="確認" @confirm="upconfirm"
			cancelText="取消" @cancel="pzshow=false" showCancelButton>
			<view class="slot-content" style="width: 730rpx;">
				<view class="flexcenter">
					<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_text" :key="index">
						<!-- 已上傳 -->
						<view class="listleftimg1 radius">
							<image class="radius" :src="item" mode=""></image>
							<view class="deleteimg" @click="delindex(index,images,images_text)"></view>
						</view>
					</view>
					<view class="itemimgBox flexcenter margin_top2" @click="uploadImg(1,images,images_text)"
						v-if="images.length<1"><!-- 未上傳 -->
						<image class="listleftimg1 radius" src="@/static/images/mine/noImage.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				id: "", //訂單id
				orderInfo: {},
				pageShow: false,
				showConfirm: false,
				text: "",
				images: [],
				images_text: [],
				currentid: "",
				pzshow: false,
				delHotelInfo_bool: true
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getInfo()
		},
		methods: {

			delJoinInfo(id) { //删除入住信息

				let _this = this;
				if (!_this.delHotelInfo_bool) return false;
				_this.delHotelInfo_bool = false;
				this.http.modal('提示', '是否確認删除', true, (resp) => {
					if (resp) {
						this.http.request("/api/hotel/delHotelJoinInfo", 'GET', {
							id
						}).then(res => {

							_this.delHotelInfo_bool = true;
							if (res.code == 1) {
								this.http.toast("操作成功")
								this.getInfo()
							} else if (res.code == 0) {
								this.http.toast(res.msg)
							} else {
								this.http.toast('系統處理中，請稍後再試');
							}
						})
					}
				})
			},
			sharemsg() {
				let that = this
				if (navigator.share) {
					navigator.share({
							title: '電囗支付-首創全台最智能POS系統0月租0抽成0設備 線上線下 一網搞定 免操作手機/平板',
							text: that.orderInfo.shop.name,
							url: 'https://opos.tw/pages_order/completejoininfo?id=' + that.orderInfo.id +
								'&invite_code=' + uni.getStorageSync(
									"invite_code"), // 當前頁面 URL
						})
						.then(() => {
							console.log('分享成功');
						})
						.catch(error => {
							console.error('分享失敗', error);
						});
				} else {
					this.http.toast("當前瀏覽器不支持分享")
				}
			},
			connection() {
				if (this.orderInfo.shop.id == uni.getStorageSync('user_id')) {
					httpRequest.toast("自己不能和自己聊天哦！");
					return false
				}
				let that = this
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				httpRequest.request('/api/user/addFriends', 'GET', {
					firend_id: this.orderInfo.shop.user_id,
					sendtype: 1,
					user_id: uni.getStorageSync('user_id')
				}).then(res => {
					uni.hideLoading()
					let data = {
						firend_id: this.orderInfo.shop.user_id,
						friend_name: this.orderInfo.shop.name,
						firend_avatar_text: this.imgUrl + this.orderInfo.shop.logoimage_text
					}
					uni.navigateTo({
						url: "/pages_message/chat?msg=" + encodeURIComponent(JSON.stringify(data))
					})
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上傳圖片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['照機', '相簿'],
					success: function(res) {
						// 選擇照機走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 選擇相簿走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				this.http.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
			cancelzsOrder(id) { //酒店取消訂單
				this.http.modal('提示', '是否確認取消訂單', true, (resp) => {
					if (resp) {
						this.http.request("/api/hotel/cancelOrder", 'GET', {
							id
						}).then(res => {
							if (res.code == 1) {
								this.http.toast("操作成功")
								this.getInfo()
							} else if (res.code == 0) {
								this.http.toast(res.msg)
							} else {
								this.http.toast('系統處理中，請稍後再試');
							}
						})
					}
				})
			},
			removezsOrder(id) { //酒店刪除訂單
				this.http.modal('提示', '是否確認刪除訂單', true, (resp) => {
					if (resp) {
						this.http.request("/api/hotel/delOrder", 'GET', {
							id
						}).then(res => {
							if (res.code == 1) {
								this.http.toast("操作成功")
								this.getInfo()
							} else if (res.code == 0) {
								this.http.toast(res.msg)
							} else {
								this.http.toast('系統處理中，請稍後再試');
							}
						})
					}
				})
			},
			zsjiezhang(item) { //住宿訂單結帳
				uni.navigateTo({
					url: "/pages_index/payment?msg=" + encodeURIComponent(JSON.stringify({
						id: item.id,
						paymoney: item.pay_price,
						order_type: 6,
						shop_id: item.shop_id,
						call_no: "暫時寫死"
					}))
				})
			},
			upconfirm() {
				if (this.images.length == 0) {
					httpRequest.toast("請上傳圖片")
				}
				this.pzshow = false
				httpRequest.request("/api/hotel/updateHotelOrderData", 'GET', {
					id: this.id,
					paypz_image: this.images.join()
				}).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						this.images = []
						this.images_text = []
						this.getInfo()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},

			getInfo() { //訂單詳情
				let _this = this
				this.http.request('/api/hotel/detail', 'GET', {
					id: this.id,
				}).then(res => {
					if (res.code == 1) {
						this.orderInfo = res.data
						this.pageShow = true
					} else {
						this.http.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-transition {
		z-index: 10 !important;
	}

	.listleftimg1 {
		width: 150rpx;
		min-width: 150rpx;
		height: 150rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		padding-bottom: 150rpx;
	}

	.shopImg {
		width: 26.62rpx;
		height: 24rpx;
		min-width: 26.62rpx;
	}

	.contactShop {
		width: 132rpx;
		height: 51rpx;
		line-height: 51rpx;
		text-align: center;
		background: rgba(255, 196, 0, 0.1);
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		border: 1rpx solid #FFB800;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		min-width: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

		.shipment {
			// width: 71rpx;
			// height: 30rpx;
			// line-height: 30rpx;
			padding: 4rpx;
			box-sizing: border-box;
			text-align: center;
			background: #13C463;
			border-radius: 14rpx 0rpx 14rpx 0rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.greyBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(102, 102, 102, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.orangeBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(255, 92, 0, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.popupBox {
		width: 660rpx;
		padding: 50rpx 50rpx 0;
		box-sizing: border-box;
	}

	::v-deep.u-steps-item__content {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 50rpx;
		flex: 1;
	}

	::v-deep.u-text:nth-child(2) {
		justify-content: flex-end !important;
	}

	.textareas {
		width: 100%;
		box-sizing: border-box;
		height: 203rpx;
		padding: 30rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EFEFEF;
	}

	.shopInfoImg {
		width: 38rpx;
		height: 38rpx;
	}

	.shopPhone {
		width: 52rpx;
		min-width: 52rpx;
		height: 52rpx;
	}

	.joininfotitle {
		padding: 10rpx 10rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.codeImage {

		justify-content: center;
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
	}

	.codeImageItem {
		width: 200rpx;
		height: 200rpx;

	}

	.joininfoitem {
		margin-bottom: 10rpx;
	}

	.shareBtn {
		border-radius: 30rpx;
		padding: 5rpx 25rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
		border: 1rpx solid #FF5C00;
		background-color: red;
	}
</style>